<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<title>Z盘</title>
<script type="text/javascript" src="/js/p5.min.js"></script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

#body {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

#div {
	width: 100%;
	height: 100%
}

#text {
	width: 500px;
	height: 200px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;
}

#h1 {
	color: #fff;
}

#msg {
	margin: 5px auto;
	text-align: center;
	color: #fff;
}
</style>
<script type="text/javascript">
	var streams = [];
	var myCanvas;
	var dropSpeed = 2; //文字下落速度
	var fontSize = 15; //文字大小
	function setup() {
		myCanvas = createCanvas(windowWidth, windowHeight);
		var x = 0;
		for (var i = 0; i <= width * 2 / fontSize; i++) {
			y = random(-width * 1.5, 0);
			var stream = new Stream();
			stream.generateSymbols(x, y);
			streams.push(stream);
			x += fontSize;
		}
	}

	function draw() {
		background(0, 0, 0, 150); //背景颜色
		textSize(fontSize);
		streams.forEach(function(stream) {
			stream.render();
		});
	// 		自定义角度
	// 		push();
	// 		translate(width / 2, height / 2);
	// 		rotate(radians(45)); //自定义角度
	// 		push();
	// 		translate(-width / 2, -height / 2);
	// 		background(0, 0, 0, 150); //背景颜色
	// 		textSize(fontSize);
	// 		streams.forEach(function(stream) {
	// 			stream.render();
	// 		});
	// 		pop();
	}

	function Symbol(x, y, speed, first, opacity) {
		this.x = x;
		this.y = y;
		this.value;
		this.speed = 2;
		this.first = first;
		this.opacity = opacity;
		this.setToRandomSymbol = function() {
			var charType = round(random(1, 5));
			var switchInterval = round(random(30, 50)); //文字变换速度
			if (frameCount % switchInterval == 0) {
				this.value = String.fromCharCode(0x30A1 + round(random(0, 96))); //片假名
			// 				this.value = String.fromCharCode(0x2E81 + round(random(0, 60))); //中日韩字符
			// 				var s = "自定义字符";
			// 				this.value = s.charAt(random(0, s.length));
			}
		}
		this.rain = function() {
			this.y = (this.y >= height) ? this.y = this.y - height : this.y += dropSpeed; //下降
		// 			this.y = (this.y <= 0) ? this.y = this.y + height : this.y -= dropSpeed; //上升
		// 			this.y = (this.y >= width) ? this.y = this.y - width : this.y += dropSpeed; //向右
		// 			this.y = (this.y <= 0) ? this.y = this.y + width : this.y -= dropSpeed; //向左
		// 			this.y = (this.y >= height * 2) ? -height * 2 : this.y += dropSpeed; //自定义角度
		}
	}

	function Stream() {
		this.symbols = [];
		this.totalSymbols = round(random(5, 45));
		this.speed = random(dropSpeed);
		this.generateSymbols = function(x, y) {
			var opacity = 255;
			var first = round(random(0, 4)) == 1;
			for (var i = 0; i <= this.totalSymbols; i++) {
				symbol = new Symbol(
					x,
					y,
					this.speed,
					first,
					opacity
				);
				symbol.setToRandomSymbol();
				this.symbols.push(symbol);
				opacity -= (255 / this.totalSymbols) / 1.5; //透明度减少程度
				y -= fontSize;
				first = false;
			}
		}

		this.render = function() {
			this.symbols.forEach(function(symbol) {
				if (symbol.first) {
					fill(0, 255, 0, symbol.opacity);
				} else {
					fill(64, 255, 64, symbol.opacity);
				}
				text(symbol.value, symbol.x + dropSpeed, symbol.y); //上下 自定义角度
				// 				text(symbol.value, symbol.y + dropSpeed, symbol.x); //左右
				symbol.rain();
				symbol.setToRandomSymbol();
			});
		}
	}
</script>
</head>
<body>
	<div id="body">
		<div id="div">
			<div id="text">
				<h1 id="h1">
					非常抱歉<br>网页出现了一个问题
				</h1>
				<a href="#" onClick="javascript:history.back(-1);" id="msg">点击返回上一页</a>
			</div>
		</div>
	</div>
</body>
</html>
